<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
		<title>登录凭证</title>
		<link rel="icon" href="favicon.ico" type="image/ico">
		<meta name="keywords" content="">
		<meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
		<meta name="author" content="yinqi">
		<link href="../css/bootstrap.min.css" rel="stylesheet">
		<link href="../css/materialdesignicons.min.css" rel="stylesheet">
		<link href="../css/style.min.css" rel="stylesheet">
		<link href="../css/front_index.css" rel="stylesheet">

		<script type="text/javascript" src="../vue/vue.min.js"></script>
		<link href="../vue/element/index.css" rel="stylesheet">
		<script type="text/javascript" src="../vue/element/index.js"></script>

	</head>

	<body>
		<div class="lyear-layout-web" id="vue">
			<div class="lyear-layout-container">


				<!--头部信息-->
				<header class="lyear-layout-header" style="padding-left: 0px;">

					<nav class="navbar navbar-default">
						<div class="topbar">

						</div>
					</nav>

				</header>

				


				<!--End 头部信息-->

				<!--页面主要内容-->

				<main class="lyear-layout-content" style="position: relative; padding-top: 70px;padding-left: 0px;">

				</main>
				<!--End 页面主要内容-->


				<!-- 模态窗口   用于查看和修改-->
				<button id="showModalLook" v-show="false" class="btn btn-primary m-r-5" type="button" data-toggle="modal"data-target="#exampleModalLook">打开</button>
				<div class="modal fade" id="exampleModalLook" tabindex="-1" role="dialog"
					 aria-labelledby="exampleModalLookLabel">
					<div class="modal-dialog" role="document">
						<div class="modal-content">

							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
										aria-hidden="true">&times;</span></button>
							</div>

							<div class="modal-body">

								<div class="form-group has-feedback feedback-left">
									<input type="text" placeholder="请输入应用名称" class="form-control"   v-model="logintokenSource.name" :readonly="operateType=='查看'"/>
								</div>

								<div class="form-group has-feedback feedback-left">
									<input type="text" placeholder="请输入应用链接" class="form-control"   v-model="logintokenSource.link" :readonly="operateType=='查看'"/>
								</div>
								
								<div class="form-group has-feedback feedback-left">
									<textarea placeholder="请输入应用描述" class="form-control"  v-model="logintokenSource.description" :readonly="operateType=='查看'"></textarea>
								</div>

								<div class="form-group has-feedback feedback-left">
									<input type="text" placeholder="请输入用户名" class="form-control"   v-model="logintokenContent.username" :readonly="operateType=='查看'"/>
								</div>
								<div class="form-group has-feedback feedback-left">
									<input type="text" placeholder="请输入密码" class="form-control"   v-model="logintokenContent.password" :readonly="operateType=='查看'"/>
								</div>
								<div class="form-group has-feedback feedback-left">
									<textarea placeholder="请输入凭证描述" class="form-control"  v-model="logintokenContent.description" :readonly="operateType=='查看'"></textarea>
								</div>

							</div>

						</div>
					</div>
				</div>

			</div>
		</div>

		<script type="text/javascript" src="../js/jquery.min.js"></script>
		<script type="text/javascript" src="../js/bootstrap.min.js"></script>
		<script type="text/javascript" src="../js/perfect-scrollbar.min.js"></script>
		<script type="text/javascript" src="../js/main.min.js"></script>

		<!--消息提示-->
		<script src="../js/bootstrap-notify.min.js"></script>
		<script type="text/javascript" src="../js/lightyear.js"></script>


		<script type="text/javascript" src="../vue/vue_config.js"></script>
		<script type="text/javascript" src="../vue/axios.min.js"></script>
		<script type="text/javascript" src="../vue/vue_api.js"></script>
		<script type="text/javascript" src="../vue/commons.js"></script>
		<script type="text/javascript">
			new Vue({
				el: '#vue',
				data: {
					
				
					source:"新增其他",
					operateType: "",
					query: {},

					//第一页面使用
					list: [],

					//第二页面使用
					logintokenSource:{},
					logintokenContent:{},
					
					showModal: {},
					hiddenModal: {},

					
					showModalWebsite: {},
					hiddenModalWebsite: {},

					//第四个页面
					showModalLook: {},
					hiddenModalLook: {},

				},
				created() {
					let id = getUrlParam("id");
					if(id != null){
						this.query.id = id;
					}
					let wid = getUrlParam("wid")
					if(wid != null){
						this.query.wid = wid;
						console.log("调用wid");
						this.getDescription();
					}
				},
				mounted() {
					this.showModal = document.getElementById("showModal")
					this.hiddenModal = document.getElementById("hiddenModal")
					
					this.showModalWebsite = document.getElementById("showModalWebsite")
					this.hiddenModalWebsite = document.getElementById("hiddenModalWebsite")

					this.showModalLook = document.getElementById("showModalLook")
					this.hiddenModalLook = document.getElementById("hiddenModalLook")


					const exampleModal = document.getElementById("exampleModal");
					$(exampleModal).on('hide.bs.modal', this.onModalHide);

					const exampleModalWebsite = document.getElementById("exampleModalWebsite");
					$(exampleModalWebsite).on('hide.bs.modal', this.onModalHide);

					const exampleModalLook = document.getElementById("exampleModalLook");
					$(exampleModalLook).on('hide.bs.modal', this.onModalHide);

				},

				methods: {
					//共用
					onModalHide(){
						if(this.operateType == '请选择'){
							this.query = {};
							this.showModal.click();
						}

						if(this.operateType == '新增凭证'){
							this.logintokenSource={};
							this.logintokenContent={};
							this.source="新增其他";
						}
						if(this.operateType == "查看"||this.operateType == '修改'){
							this.logintokenSource={};
							this.logintokenContent={};
						}
					},
						
					check(){
						this.showModalLook.click();
						this.operateType='查看';
					},


					async getDescription(){
						var url = rootUrl+"front/getDescription";
						await fetchDataPost(url,this.query).then(res =>{
							if(res.code === 200){
								
								this.logintokenSource = res.data.logintokenSource;
								this.logintokenContent = res.data.logintokenContent;
								this.check();
								
							}else{
								danger(res.message);
							}
						})
					},


				}

			})
		</script>

	</body>
</html>